import {Col, Row} from "antd";
import React, { useEffect } from "react";
import API from "../../api/api";
import {Scrollbars} from "react-custom-scrollbars";

export default function Small(){

    let getSmallImageArr = API.getLinks("small","side");

    let smallImageGroup1 = [];

    let smallImageGroup2 = [];

    // const groupHander=()=>{
    //     for(let i=0;i<getSmallImageArr.length;i++){
    //         if(i%2==0){
    //             smallImageGroup1.push(getSmallImageArr[i])
    //         }else smallImageGroup2.push(getSmallImageArr[i])
    //     }
    // }

    // const renderGroup =(num)=>{
        // if(num==1){
        //     return smallImageGroup1.map(item=> <a href={item.link} target="_blank"><img src={item.image_url} style={{marginBottom:"0.6rem"}}></img> </a> )
        // }else {
        //     return smallImageGroup2.map(item=> <a href={item.link} target="_blank"><img src={item.image_url} style={{marginBottom:"0.6rem"}}></img> </a> )
        // }
    // }

    const groupHander=()=>{
        for(let i=0;i<getSmallImageArr.length;i++){
            smallImageGroup1.push(getSmallImageArr[i])
        }
    }

    const renderGroup =_=>{
        // return smallImageGroup1.map(item=> <a href={item.link} target="_blank"><img src={item.image_url} style={{marginBottom:"0.6rem"}}></img> </a> )
        return smallImageGroup1.map(item=> <div style={{marginTop:"1rem",width:"100%"}} dangerouslySetInnerHTML={{__html:item.link }}></div> )
    }

    groupHander();

//如果在componentWillMount中插入，只能指定root，因为此时页面还没有渲染出来，找不到append元素，需要在指定位置渲染，就要在componentDidMount中此时元素已经渲染完成
    useEffect(()=>{
        let script2 = document.createElement('script');
        script2.type = 'text/javascript';
        script2.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
        document.getElementById('root').appendChild(script2);
        },[]
    );

    return(
        <Scrollbars>
            <Row className="width-image-setting" gutter={16} style={{marginLeft:"8px",marginRight:"1rem",maxHeight:"100%",}}>
                <div id="he-plugin-standard" style={{width:"100%"}}></div>
                {renderGroup()}
            </Row>
        </Scrollbars>
    )
}
